<template>
    <div class="reply">
      <van-nav-bar
        :left-text="`回复(${replyCount})`"
        left-arrow
        @click-left="onClickLeft"
      />
      <div class="reply-current reply-list__item" @click="_commentSecond(replyItem, 1)">
        <img :src="replyItem.avatar" alt="">
        <div class="flex-1">
          <p class="text1-2 mb-8">{{ replyItem.nickname || replyItem.username }}</p>
          <p>{{ replyItem.content }} <span
            class="text1-2">{{ replyItem.mtime }}</span></p>
        </div>
        <div class="d-flex flex-column align-items-center">
          <van-icon class="mb-8" name="like" size="16" :color="replyItem.is_like === 0 ? '#999999' : 'red'"
                    @click="_commentLike(replyItem, -1)"/>
          <p class="text1-2">{{ replyItem.like_num }}</p>
        </div>
      </div>
      <div class="reply-list__label">全部回复</div>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="_list"
        >
          <template v-for="(item, index) in list">
            <div class="reply-list__items" :key="item.id">
              <div class="reply-list__item" @click="_commentSecond(item, 0)">
                <img :src="item.avatar" alt="">
                <div class="flex-1 content">
                  <p class="text1-2 mb-8">{{ item.nickname || item.username }}</p>
                  <p>{{ item.content }} <span
                    class="text1-2">{{ item.mtime }}</span></p>
                </div>
                <div class="d-flex flex-column align-items-center">
                  <van-icon class="mb-8" name="like" size="16" :color="item.is_like === 0 ? '#999999' : 'red'"
                            @click="_commentLike(item, index)"/>
                  <p class="text1-2">{{ item.like_num }}</p>
                </div>
              </div>
              <div class="reply-comment text1-3" v-if="item.reply_user.length !== 0">
                <div>@{{ item.reply_user.nickname || item.reply_user.username }}: {{ item.reply_user.content }}</div>
              </div>
            </div>
          </template>
        </van-list>
      </van-pull-refresh>
      <div class="reply-field">
        <van-field
          v-model="replyValue"
          center
          clearable
          :placeholder="replyPlaceholder"
        >
          <template #button>
            <van-button size="small" type="default" @click="_comment">发送</van-button>
          </template>
        </van-field>
      </div>
    </div>
</template>

<script>
export default {
    name: 'reply',
    data () {
        return {
            replyItem: null,
            list: [],
            loading: false,
            finished: false,
            refreshing: false,
            page: 0,
            replyValue: '',
            replyPlaceholder: '',
            commentId: null,
            replyCount: 0
        }
    },
    created () {
        if (this.$route.params.item.id) {
            this.replyItem = this.$route.params.item
        } else {
            this.replyItem = this.$store.state.replyItem
        }
        window.console.log(this.replyItem)
        this.replyPlaceholder = `回复${this.replyItem.nickname || this.replyItem.username}:`
        this.$store.commit('setReplyItem', this.replyItem)
    },
    methods: {
        onClickLeft () {
            this.$router.back()
        },
        _commentLike (item, index) {
            if (item.is_like === 0) {
                this.$http.video.like({ vid: item.id }).then(({ code }) => {
                    if (code === 200) {
                        this._computeLike(index, 1)
                    }
                })
            } else {
                this.$http.video.cancelLike({ vid: item.id }).then(({ code }) => {
                    if (code === 200) {
                        this._computeLike(index, 0)
                    }
                })
            }
        },
        _computeLike (index, type) {
            if (index === -1) {
                this.replyItem.is_like = type ? 1 : 0
                if (type) {
                    this.replyItem.like_num += 1
                } else {
                    this.replyItem.like_num -= 1
                }
            } else {
                this.list[index].is_like = type ? 1 : 0
                if (type) {
                    this.list[index].like_num += 1
                } else {
                    this.list[index].like_num -= 1
                }
            }
        },
        _comment () {
            if (!this.replyValue) {
                return this.$toast('请输入回复内容')
            }
            this.$http.video.comment({
                type: this.replyItem.type,
                vid: this.replyItem.vid,
                pid: this.replyItem.id,
                comment_id: this.commentId,
                content: this.replyValue
            }).then(({ code, msg }) => {
                if (code === 200) {
                    this.$toast.success(msg)
                    this.refreshing = true
                    this.onRefresh()
                    this.replyValue = ''
                }
            })
        },
        _commentSecond (item, type) {
            if (type) {
                this.commentId = null
            } else {
                this.commentId = item.id
            }
            this.replyPlaceholder = `回复${item.nickname || item.username}:`
        },
        _list () {
            this.$http.video.commentTable({
                type: this.replyItem.type,
                vid: this.replyItem.vid,
                pid: this.replyItem.id,
                page: this.refreshing ? this.page = 1 : this.page += 1
            }).then(({ data, code }) => {
                if (this.refreshing) {
                    this.list = []
                    this.refreshing = false
                }
                if (code === 200) {
                    this.replyCount = data.total
                    if (data.current_page === 1) {
                        this.list = data.list
                    } else {
                        this.list = this.list.concat(data.list)
                    }
                    this.loading = false
                    if (data.total_page === data.current_page || data.total_page === 0) {
                        this.finished = true
                    }
                }
            })
        },
        onRefresh () {
            // 清空列表数据
            this.finished = false

            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true
            this._list()
        }
    }
}
</script>

<style lang="scss" scoped>
.reply {
  padding-bottom: 50px;
  &-current {
    margin-bottom: 15px;
  }
  &-list {
    &__label {
      background-color: #ffffff;
      padding: 10px;
    }
    &__items {
      position: relative;
      line-height: 24px;
      &:not(:last-child)::after {
        position: absolute;
        box-sizing: border-box;
        content: ' ';
        pointer-events: none;
        right: 0;
        bottom: 0;
        left: 16px;
        border-bottom: 1px solid #ebedf0;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
      }
    }
    &__item {
      padding: 10px;
      display: flex;
      background-color: #ffffff;
      .content {
        padding-right: 8px;
      }
      img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        margin-right: 8px;
      }
    }
  }
  &-field {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  &-comment {
    background-color: #ffffff;
    padding-left: 66px;
    padding-bottom: 10px;
    >div {
      border-left: 1px solid #ebedf0;
      padding-left: 8px;
    }
  }
}
</style>
